<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-form :inline="true" :model="params" ref="params" class="demo-form-inline sarchForm" size="small"
					@submit.native.prevent>
					<!-- <el-form-item label="课题名称">
						<el-input @keyup.enter.native="handleSubmit" v-model="params.name"
							placeholder="课题名称"></el-input>
					</el-form-item> -->
					<el-form-item label="审核状态">
						<el-select v-model="params.status" placeholder="状态">
							<el-option label="审核中" value="1"></el-option>
							<el-option label="审核通过" value="2"></el-option>
							<el-option label="驳回" value="3"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleSubmit">查询</el-button>
						<el-button @click="handleReset">重置</el-button>
						<!-- <el-button @click="handleAdd('add', cateInfo)" type="primary"
							icon="el-icon-plus">新增课题</el-button> -->
						<!-- <el-button size="small" @click="batchDelete()" plain type="danger">批量删除</el-button> -->
					</el-form-item>
					<el-form-item>
						<!-- <el-button size="small" @click="batchTransfer()" plain type="success">批量转移</el-button> -->
					</el-form-item>
				</el-form>

				<div v-loading="loading">
					<div v-for="(item,index) in newData" :key="item.id" style="border-bottom: 1px solid #ddd;padding-bottom: 30px;margin-bottom: 30px;">
						<div style="display: flex;align-items: center;justify-content: space-between;color: #666;">
							<div>订单号：{{item.orderId}}</div>
							<div class="nameHover" @click="handleInfo(item)">查看申请信息</div>
						</div>

						<div v-for="(itemm,indexx) in item.orderItems" :key="itemm.id"
							style="display: flex;align-items: center;margin-top: 20px;">
							<img style="min-width: 217px;height: 154px;border: 1px solid #ddd;" :src="itemm.productModel.thumbnail" />
							<div
								style="width: 100%;margin-left: 20px;">
								<el-row :gutter="15">
									<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
										<div>
											<div style="font-size: 22px;color: #333;" class="nameHover" @click="handleDetail(itemm.productModel.id)">{{itemm.productModel.title}}</div>
											<div style="font-size: 16px;margin-top: 20px;line-height: 20px;color: #666;margin-top: 8px;height: 60px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">{{itemm.productModel.description}}</div>
										</div>
									</el-col>
									<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="text-align: center;">
										<div>
											<div>
												<span v-if="itemm.productModel.source==1" class="source-class">内部产品</span>
												<span v-else class="source-class">外部产品</span>
												<span class="source-class">{{itemm.productModel.categoryName}}</span>
											</div>
											<div style="font-size: 16px;color: #666;margin: 30px;">供应商：{{itemm.productModel.supplier}}</div>
											<div style="font-size: 16px;color: #666;">
												<span>{{updateTimeChange(itemm.createTime)}}</span>
												<span style="margin: 0 40px;">{{itemm.consumName==null?'0':itemm.consumName}}</span>
												<span v-if="item.status==1" style="color: orange;">审核中</span>
												<template v-else-if="item.status==2">
													<span v-if="itemm.isEvaluate&&itemm.isEvaluate==1">已评价</span>
													<span v-else class="nameHover" @click="handleEvaluate(itemm.id)">评价</span>
												</template>
												
												<span v-else-if="item.status==3" style="color: red;">驳回</span>
											</div>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
					</div>
					
					<el-empty v-if="newData.length==0 && loading==false" description="暂无内容"></el-empty>
				</div>

			</el-col>
		</el-row>
		<!-- 新增资讯 -->
		<NewDialog @getNewList="getNewList" ref="newCon" />
		<evaluateDialog @getNewList="getNewList" ref="evaluateDialog"></evaluateDialog>
		<!-- 详情 -->
		<!-- <RenovationDetail ref="detailContent" /> -->
		<el-dialog title="选择栏目" :visible.sync="dialogVisible" width="30%">
			<div class="treeWrapper">
				<el-tree ref="tree" class="treeRadio" default-expand-all :props="defaultPropsSelect" :data="dataTree"
					show-checkbox check-strictly node-key="id" @check="handleClick" @check-change="handleClickChange" />
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleTo()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		getColumnTree2,
		getColumnList,
		getNewDelete,
		getNewOptions,
		getNewDetail,
		transferNews
	} from "@/request/api/new";
	// import NewDialog from "@/view/personalCenter/myTopic/newDialog.vue";
	import NewDialog from "@/view/personalCenter/demand/orderInfoDialog.vue";
	import evaluateDialog from "@/view/personalCenter/myOrder/evaluateDialog.vue";
	import {
		getMyOrderList
	} from "@/request/api/demand";
	import {
		getKey
	} from "@/request/api/planPromotion";
	export default {
		components: {
			NewDialog,
			evaluateDialog
		},
		data() {
			return {
				dataTree: [{
					name: '平台资讯',
					id: 0
				}, {
					name: '机构资讯',
					id: 1
				}, {
					name: '专家资讯',
					id: 2
				}],
				defaultProps: {
					children: "children",
					label: "name",
				},
				defaultPropsSelect: {
					children: "children",
					label: "name",
				},
				selectCate: {
					checkStrictly: true,
					label: "name",
					children: "children",
					value: "id",
					getCheckedNodes: true,
					expandTrigger: "hover",
				},
				isEdit: false,
				loading: false,
				params: {
					current: 1,
					pageSize: 10,
					status: "", //状态
					userId: ""
				},
				newData: [],
				cateInfo: {
					cateId: "", //栏目id
					cateName: "我的课题", //栏目名称
				},
				total: 0,
				multipleSelection: [], //批量选择
				dialogVisible: false,
			};
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
				this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
				this.params.userId = this.userInfo.id
			}
			// this.getTypeTree();
			this.getNewList();
			// this.getNewList(this.cateInfo.cateId
		},
		methods: {
			// 评价
			handleEvaluate(id){
				this.$refs.evaluateDialog.open(id);
			},
			// 查看申请信息
			handleInfo(item){
				this.$refs.newCon.open(item)
			},
			// 格式化时间
			updateTimeChange(val){
				return this.$moment(val).format('YYYY-MM-DD')
			},
			handleTabClick(tab) {
				this.cateInfo.cateId = tab.name;
				this.cateInfo.cateName = tab.label;
				// this.params.informationType = tab.name;

				if (tab.name === '0') {
					this.params.createBy = ''
				} else if (tab.name === '1') {
					this.params.createBy = JSON.parse(window.sessionStorage.getItem("userInfo")).id
				}
				this.getNewList()
			},
			// 获取产品类型树
			getTypeTree() {
				getColumnTree2().then((res) => {
					if (res.data.code === 200) {
						this.loading = false;
						this.dataTree = res.data.result;
					}
				});
			},
			// 父级
			selectValue() {
				this.$refs.cascader.dropDownVisible = false;
			},
			// 查看详情
			handleDetail(id) {
				this.$router.push({
					name: "ApplicationProductsDetail",
					query: {
						id,
						userId:this.userInfo.id
					},
				});
				// let url = this.$router.resolve({
				// 	name: "topicCollectDetail",
				// 	query: {
				// 		id
				// 	},
				// });
				// window.open(url.href, "_blank");
			},

			handleaDetail(id, name) {
				let url = this.$router.resolve({
					name: "topicCollectDetail",
					query: {
						id
					},
				});
				window.open(url.href, "_blank");
			},
			// 点击左侧树获取信息
			handleNodeClick(data) {
				if (data.children) {
					this.$message({
						message: "不可选择父级栏目进行新增资讯！",
						type: "warning",
					});
					this.cateInfo.cateId = "";
					this.cateInfo.cateName = "";
					this.params.informationType = "";
				} else {
					this.cateInfo.cateId = data.id;
					this.cateInfo.cateName = data.name;
					this.params.informationType = data.id;
					this.getNewList(data.id);
				}
			},
			// 获取新闻列表
			getNewList() {
				this.newData = []
				this.loading = true
				getMyOrderList(this.params).then((res) => {
					this.loading = false
					if (res.data.code === 1) {
						this.newData = res.data.data.totalList;
						this.total = res.data.data.total;
					}
				});
			},
			// 新增资讯
			handleAdd(type, cateInfo) {
				this.$refs.newCon.open(type, cateInfo);
				// if (this.cateInfo.cateId !== '') {
				// 	this.$refs.newCon.open(type, cateInfo);
				// } else {
				// 	this.$message({
				// 		message: "请选择栏目！",
				// 		type: "warning",
				// 	});
				// }
			},
			// 编辑
			handleEdit(type, cateInfo, info) {
				this.$refs.newCon.open(type, cateInfo, info);
			},
			// 删除
			hanldeDelete(id) {
				this.$confirm("确定删除该条信息吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.getDelete(id);
				});
			},
			// 删除接口
			getDelete(id) {
				myTopicDelete(id).then((res) => {
					if (res.data.code === 200) {
						this.$message({
							message: res.data.message,
							type: "success",
						});
						this.getNewList();
						this.$refs.tableRef.clearSelection();
					} else {
						this.$message.error(res.data.message);
					}
				});
			},
			// 选择左侧复选框
			changeSelect(val) {
				this.multipleSelection = val;
			},
			getKey(row) {
				return row.id;
			},
			// 批量删除
			batchDelete() {
				if (this.multipleSelection.length === 0) {
					this.$message({
						message: "请选择数据！",
						type: "warning",
					});
					return false;
				}
				this.$confirm("确定删除吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					var ids = this.multipleSelection.map((item) => item.id);
					this.getDelete(ids);
				});
			},
			// 查询
			handleSubmit() {
				this.params.current = 1;
				this.getNewList(this.cateInfo.cateId);
			},
			// 重置
			handleReset() {
				this.params.current = 1;
				this.params.name = null;
				this.getNewList(this.cateInfo.cateId);
			},
			handleSizeChange(val) {
				this.params.pageSize = val;
				this.params.current = 1;
				this.getNewList(this.cateInfo.cateId);
			},
			handleCurrentChange(val) {
				this.params.page = val;
				this.getNewList(this.cateInfo.cateId);
			},
			// 提交
			handleSend(info) {
				this.$confirm("确定提交审核吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					// this.getAdd({
					// 	id: info.id,
					// 	verifyStatus: 4
					// });
					let params = JSON.parse(JSON.stringify(info))
					params.verifyStatus = 4
					myTopicAdd(params).then((res) => {
						if (res.data.code === 200) {
							this.$message({
								message: res.data.message,
								type: "success",
							});
							// this.dialogVisible = false
							this.getNewList();
						} else {
							this.$message.error(res.data.message);
						}
					});
				});
			},
			// 下架
			handleLower(info) {
				this.$confirm("确定下架该资讯吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.getAdd({
						id: info.id,
						verifyStatus: 2
					});
				});
			},
			// 修改接口
			getAdd(params) {
				myTopicAudit(params).then((res) => {
					if (res.data.code === 200) {
						this.$message({
							message: res.data.message,
							type: "success",
						});
						// this.dialogVisible = false
						this.getNewList();
					} else {
						this.$message.error(res.data.message);
					}
				});
			},
			// 判断表格每一行的 CheckBox 是否可以勾选
			judgeSelect(row, index) {
				return row.verifyStatus == "0" || row.verifyStatus == "2" || row.verifyStatus ==
				"3"; // 返回true该行可选，返回false则不可选
			},
			// 批量转移
			batchTransfer() {
				if (this.multipleSelection.length === 0) {
					this.$message({
						message: "请选择数据！",
						type: "warning",
					});
					return false;
				}
				this.dialogVisible = true;
				this.$refs.tree.setCheckedKeys([]);
			},
			handleClickChange(data, check, childCheck) {
				if (check) {
					this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
				}
			},
			handleClick(data, tree) {
				this.$refs.tree.setCheckedKeys([]); // 删除所有选中节点
				this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
			},
			// 转移栏目-点击确定
			handleTo() {
				var columnData = this.$refs.tree.getCheckedNodes();
				if (columnData.length === 0) {
					this.$message({
						message: '请选择栏目！',
						type: 'warning'
					});
					return false;
				} else {
					var newData = []
					this.multipleSelection.forEach(item => {
						newData.push({
							id: item.id, //资讯id
							ntCtgId: columnData[0].id, //栏目id
							columnName: columnData[0].name //栏目名称
						})
					})
					transferNews(newData).then(res => {
						if (res.data.code === 200) {
							this.$message({
								message: res.data.message,
								type: "success",
							});
							this.dialogVisible = false
							this.getNewList();
							this.$refs.tableRef.clearSelection();
						} else {
							this.$message.error(res.data.message);
						}
					})
				}

			}
		},
	};
</script>
<style lang="less" scoped>
	.el-card {
		overflow-y: auto;
		height: 830px;
	}

	.bigBtn {
		width: 140px;
	}

	.tree_icon {
		color: #67c23a;
	}

	.poolPage {
		margin-top: 15px;
		text-align: right;
	}

	/deep/.treeRadio .el-checkbox__inner {
		border-radius: 50%;
	}

	/deep/ .el-tree {
		// padding-top: 15px;
		// padding-left: 10px;

		// 不可全选样式
		.el-tree-node {
			margin-bottom: 5px;

			.is-leaf+.el-checkbox .el-checkbox__inner {
				display: inline-block;
			}

			.el-checkbox .el-checkbox__inner {
				display: none;
			}
		}
	}

	.treeWrapper {
		height: 600px;
		overflow-y: auto;
	}

	.nameHover:hover {
		cursor: pointer;
		color: #409EFF;
	}

	.source-class {
		font-size: 14px;
		color: #666;
		padding: 5px 20px;
		background-color: #f5f8fb;
		border: 2px solid #dbe5f0;
		border-radius: 20px;
		margin-right: 10px;
	}
</style>